<template>
  <div>
    <img
      src="@/assets/css/images/bin.svg"
      alt=""
      style="width: 45px; height: 45px; vertical-align: middle"
    />
    <b> 回收站 </b>
    <br /><br />
    <el-card class="mycard">
      <div>
        <!-- <div class="showEmpty">
          <img class="emptyimg" src="@/assets/css/images/bin.png" alt="" />
          <p class="null">回收站为空</p>
        </div> -->
        <el-table
        class="showform"
          :data="binTable"
          :stripe="true"
          @selection-change="handleSelectionChange"
          :header-cell-style="{ background: '#FAFAFA' }"
        >
          <el-table-column type="selection" width="25"> </el-table-column>
          <!-- <el-table-column prop="oldname" label="文件名"> </el-table-column> -->
          <el-table-column prop="oldname" label="文件名" sortable>
            <template slot-scope="scope" class="rowText">
              <div class="icon">
                <svg class="icons" aria-hidden="true">
                  <use v-bind:xlink:href="scope.row.icon"></use>
                </svg>
              </div>
              <div class="text">
                <b
                  class="rowname"
                  @click="preview(scope.row)"
                  style="margin-left:5px"
                >
                  {{ scope.row.oldname }}</b
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="size" label="文件大小"> </el-table-column>
          <el-table-column prop="type" label="文件类型"></el-table-column>
          <el-table-column prop="owner" label="创建人"> </el-table-column>
          <el-table-column prop="uploadtime" label="上传日期">
          </el-table-column>

          <!-- 操作按钮 -->
          <el-table-column label="操作" width="240">
            <template slot-scope="scope">
              <el-button
                type="success"
                plain
                icon="el-icon-refresh-left"
                circle
                @click="refresh(scope.$index, scope.row)"
              ></el-button>
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                @click.native="deleteRow(scope.$index, scope.row)"
                circle
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 回收站列表
      binTable: [
        {
          id: "1",
          uploadtime: "2022-05-02",
          oldname: "Resource_Systems.pdf",
          type: "pdf",
          owner: "admin",
          size: "2568KB",
          icon: "#icon-pdf",
        },
        {
          id: "2",
          uploadtime: "2022-03-04",
          oldname: "毕业设计开题报告.doc",
          type: "doc",
          owner: "admin",
          size: "168KB",
          icon: "#icon-WORD",
        },
      ],
      form:{
        uno:""
      },
      //在data中设置:
      showForm: [],
      showEmpty: true, //设置该图片显示还是隐藏
    };
  },
  watch: {
    binTable(){
      //监测showForm数值数据变化，一旦发生改变就会调用该函数
      if (this.binTable.length > 0) {
        //判断数组不为空就隐藏图片
        this.showEmpty = false;
      } else {
        //为空就显示图片
        this.showEmpty = true;
      }
    },
  },
  mounted() {
    // 获取回收站文件
    this.form.uno = parseInt(localStorage.getItem("rid"))+1;
    this.$http.post("http://192.168.43.79:8080/userFile/fileReturnList", this.form).then((res) => {
      this.binTable = res.data.data;
    });
  },
  methods: {
    // 文件删除
    deleteRow(index, rows) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.post(`${this.systemURL}/userFile/deleteFile`, rows);
          // console.log(rows);
          this.binTable.splice(index, 1);
          this.total--;
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    refresh(index, row) {
      this.$confirm("是否恢复该文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success",
      })
        .then(() => {
          this.$http.post(`${this.systemURL}/userFile/returnFile`, row);
          this.binTable.splice(index, 1);
          this.total--;
          this.$message({
            type: "success",
            message: "文件已恢复!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
.mycard {
  box-shadow: 0 1px rgba(0, 0, 0, 0.15) !important;
  border-radius: 1%;
  text-align: center;
  vertical-align: middle;
  height: 100%;
  min-height: 100%;
}
.null {
  text-align: center;
  font-weight: bold;
}
.emptyimg {
  vertical-align: middle;
  margin-top: 15%;
  height: 260px;
  width: 420px;
}
.icons {
  width: 35px;
  height: 32px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.icon,
.text {
  display: table-cell;
  vertical-align: middle;
  margin-right: 5px;
}
</style>
